<template>
	<view>
		<uv-loading-page :loading="loading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
		<view class="themeLinearBgColor">
			<safeTopVue :backgroundColor="'var(--homePageBackground)'" />
			<view class="cloumCenter mtb30">
				<calendarBtnVue />
				<view class="rowSpaceAround w100 mtb30">
					<view v-for="(item,index) in predict" :key="index" class="item cloumCenter w100">
						<view class="cardTitle themeFontColor9">
							{{item.title}}
						</view>
						<view class="cardTips themeFontColor7">
							{{item.value}}
							<text class="cardUnit">{{item.unit}}</text>
						</view>
					</view>
				</view>
				<view class="cardUnit themeFontColor9 rowCenter mtb20" @click="goPage()">
					查看更多 <uv-icon name="arrow-right" color="#fff" size="12"></uv-icon>
				</view>
			</view>
			<view class="static rowSpaceBetween" style="flex-wrap: wrap;padding-bottom: 20rpx;">
				<view v-for="(item,index) in predictInfo" :key="index" style="width: 25%;" class="cloumCenter">
					<view class="cardTitle themeFontColor9">
						{{item.title}}
					</view>
					<view class="cardTitle themeFontColor9" style="font-weight: bold;">
						{{item.value}}
					</view>
				</view>
			</view>
		</view>
		<homeInfoVue></homeInfoVue>
	</view>


</template>

<script setup>
	import calendarBtnVue from '@/components/calendarBtn/calendarBtn.vue';
	import homeInfoVue from './homecomponents/homeInfo.vue';
	import {
		ref,
		computed,
		watch,
		reactive,
		toRefs
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 引入api方法
	import {
		getPredictApi
	} from '@/api/agentApi/predict.js'


	// 加载状态
	let loading = ref(false)
	// 顶部金额显示
	const predict = reactive([{
		key: 'tradeAmount',
		title: '交易金额',
		value: '7.47',
		unit: '万元'
	}, {
		key: 'predictAgencyAmount',
		title: '预计佣金',
		value: '35.87',
		unit: '元'
	}])
	// 顶部信息
	const predictInfo = reactive(
		[{
			key: 'newStoreQuantity',
			title: '新增商户',
			value: '10',
		}, {
			key: 'storeQuantity',
			title: '总商户',
			value: '10',
		}, {
			key: 'hotStoreQuantity',
			title: '活跃商户',
			value: '10',
		}, {
			key: 'tradeQuantity',
			title: '交易笔数',
			value: '10',
		}])

	// 获取用户佣金
	const getPredict = async () => {
		loading.value = true
		let res = await getPredictApi()
		loading.value = false
		allocationHandler(res.data, predict)
		allocationHandler(res.data, predictInfo)
	}
	// 分配数据
	const allocationHandler = (data, list) => {
		list.forEach((item) => {
			if (item.key && data[item.key] !== undefined) {
				item.value = data[item.key]
			}
		})
	}

	// 查看更多	
	const goPage = () => {
		uni.navigateTo({
			url: '/pages/tabbar/home/homeMore/homeMore'
		})
	}


	// 页面加载
	onLoad(() => {
		getPredict()
	})
</script>

<style lang="scss">

</style>